<template>
  <header class="header">
    <h1>todos</h1>
    <!--v-model="isAll 全选框 -->
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll"> 
    <label for="toggle-all"></label>
    <!--   1.v-model="task" 双向绑定数据 keydown.enter 事件-->
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      v-model="task"
      @keydown.enter="enterFn"
      
    />
  </header>
</template>

<script>
export default {
  // 接收父组件传的数组
  props:["arr"],
  // 计算属性
  computed:{
    // 全选框
    isAll:{
    set(val){
      // 把全选的选中状态 赋给每一个小选框
      this.arr.forEach(item => item.isDone=val);
    },
    get(){
      // 把小选框每一项的 返回给父组件 一真则真
      return this.arr.every(item=>item.isDone);
      
      
    }
    }
   
  },
  data(){
    return{
      task:'' // 数据改变视图
    }
  },
 methods:{
  //  2. 按下输入框值赋给父组件
   enterFn(){
   if(this.task.trim()==0){ // 判断不能为空
     alert("不能为空哦~~")
  return
   }
  //  子传父 
   this.$emit("create",this.task)
  //  清空输入框
   this.task=''
   }
 }
}
</script>